<template>
	<Layout class="bg-white p-1">
		<Row class="m-1">
			<Col span="3" class="pr-1">
			<Input class="w-100" v-model="searchKey.clientName"placeholder="请输入客户名" />
			</Col>
			<Col span="3" class="pr-1">
			<Input class="w-100" v-model="searchKey.phone" placeholder="请输入手机号" />
			</Col>
			<Col span="3" class="pr-1">
			<Select class="w-100" v-model="searchKey.sex" placeholder="请选择性别" clearable>
				<Option 
					v-for="(item, index) in sexList" 
					:value="item.value" 
					:key="index">{{ item.label }}</Option>
			</Select>
			</Col>
			<Col span="3" class="pr-1">
			<Select class="w-100" v-model="searchKey.vipStatu" placeholder="是否是会员" clearable>
				<Option 
					v-for="(item, index) in vipStatuList" 
					:value="item.value" 
					:key="index">{{ item.label }}</Option>
			</Select>
			</Col>
			<Col span="3" class="pr-1">
			<Select class="w-100" v-model="searchKey.dFlag" clearable placeholder="请选择客户状态">
				<Option value="1">已冻结</Option>
				<Option value="0">正常</Option>
			</Select>
			</Col>

			<Button class="float-right" type="primary" shape="circle" @click="search" icon="ios-search">查询</Button>

		</Row>
		<Layout class="bg-white m-1">
			<Table border :columns="tableInfo.columnInfo" :data="tableInfo.data">
				<template slot-scope="{ row, index }" slot="vipStatu">
					<span v-if="row.vipStatu === 1">是</span>
					<span v-else>否</span>
				</template>
				<template slot-scope="{ row, index }" slot="dflg">
					<span class="text-danger" v-if="row.dflg === true">已冻结</span>
					<span class="text-primary" v-else>正常</span>
				</template>
				<template slot-scope="{ row, index }" slot="clientAmount">
					<span class="text-danger">￥{{util.parseMoney(row.clientAmount / 100, 2)}}</span>
				</template>
				<template slot-scope="{ row, index }" slot="sex">
					<span v-if="row.sex">男</span>
					<span v-else>女</span>
				</template>
				<template slot-scope="{ row, index }" slot="action">
					<Button type="primary" size="small"
						@click="show(row.clientId)">详细</Button>
					<!-- <Button type="error" size="small" @click="remove(row.userId)">删除</Button> -->
				</template>
			</Table>
			<Page :class="'m-2 text-right'" :page-size="tableInfo.pageSize" @on-change="pageSearch"
				:total="tableInfo.total" />
		</Layout>
	</Layout>
</template>
<script>
	export default {
		data() {
			return {
				searchKey: {
					clientName: "",
					phone: "",
					storeId: "",
					sex: "",
					vipStatu: "",
					dFlg: ""
				},
				stores: [],
				sexList: [{
						value: '1',
						label: '男'
					},
					{
						value: '0',
						label: '女'
					}
				],
				vipStatuList: [{
						value: '1',
						label: '是'
					},
					{
						value: '0',
						label: '否'
					}
				],
				tableInfo: {
					currentPage: 1,
					size: 10,
					total: 0,
					columnInfo: [{
							title: "客户编号",
							key: "clientId",
							width: 100
						},
						{
							title: "客户名",
							key: "clientName",
							width: 100
						},
						{
							title: "性别",
							slot: "sex",
							width: 70
						},
						{
							title: "门店",
							key: "name",
							width: 200
						},
						{
							title: "手机号",
							key: "phone",
						},
						{
							title: "押金",
							slot: "clientAmount",
							width: 100
						},
						{
							title: "会员状态",
							slot: 'vipStatu',
							width: 100
						},
						{
							title: "客户状态",
							slot: 'dflg',
							width: 100
						},
						{
							title: "操作",
							slot: 'action',
							width: 80
						}
					],
					data: []
				}
			}
		},
		methods: {
			init: function() {
				this.search();
			},
			show: function(clientId) {
				this.$router.push({
					path: "client/detail?clientId="+clientId,
				});
			},
			search: function() {
				this.tableInfo.currentPage = 1;
				this.loadData();
			},
			loadData: function() {
				this.http.get({
					url: "/client/page",
					param: {
						current: this.tableInfo.currentPage,
						size: this.tableInfo.size,
						clientName: this.searchKey.clientName,
						phone: this.searchKey.phone,
						storeId: this.searchKey.storeId,
						sex: this.searchKey.sex,
						vipStatu: this.searchKey.vipStatu,
						dFlag: this.searchKey.dFlag,
					}
				}).then(data => {
					this.tableInfo.currentPage = data.current;
					this.tableInfo.total = data.total;
					this.tableInfo.pageSize = data.size;
					this.tableInfo.data = data.records;
				});
			},
			pageSearch: function(changedPage) {
				this.tableInfo.currentPage = changedPage;
				this.loadData();
			},

		},
		created: function() {
			this.searchKey.storeId = this.store.state.currentUser.store.storeId;
			this.init();
		},
	}
</script>

<style>

</style>
